<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>

</head>

<body>
    <div id="root">
        <!-- 
            数组更改使用数组方法：
                push,pop,splice,shift,unshift，reverser,sort

                vm._data.teammate.hobby,push == Aarray.prototype.push
                //false
                包装数组的常用修改方法
         -->

        <h2>name:{{name}}</h2>
        <h2>age:{{age}}</h2>

        <h2>队友信息</h2>
        <button @click="addSex">添加一个性别属性，默认值是男</button>
        <h2 v-if="teammate.sex">性别：{{teammate.sex}}</h2>

        <h2>爱好</h2>
        <button @click="addHobby">添加爱好</button>
        <ul>
            <li v-for="(h,index) in teammate.hobby">
                {{h}}
            </li>
        </ul <ul>
        <li v-for='(f,index) in teammate.friends' :key="index">
            {{f.name}} -- {{f.age}}
        </li>
        </ul>

    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#root',
            data: {
                name: 'SONG',
                age: 18,
                songs: {
                    name: 'LHC',
                    time: {
                        beforeTime: '2019',
                        afterTime: '2022'
                    }
                },
                teammate: {
                    name: 'LIU',
                    age: {
                        rAge: 15,
                        sAge: 16
                    },
                    hobby: ['sing', 'dance', 'rap'],
                    friends: [
                        { name: 'MA', age: 19 },
                        { name: 'DING', age: 21 }
                    ]
                }
            },
            methods: {
                addSex() {
                    Vue.set(this.teammate, 'sex', '男')
                },
                addHobby() {
                    // this.teammate.hobby.push('basketball')

                    //替换
                    Vue.set(this.teammate.hobby, 0, 'sing fanSong')
                }
            },
            computed:{
                
            } 

        })
    </script>
</body>

</html>

<!-- 37 -->